<template>
  <div class="course-selection">
    <div class="filters">
      <el-input
        v-model="searchQuery"
        placeholder="搜索课程"
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      
      <el-select
        v-model="selectedCategory"
        placeholder="选择分类"
        @change="handleSearch"
      >
        <el-option
          v-for="category in categories"
          :key="category.id"
          :label="category.name"
          :value="category.id"
        />
      </el-select>
    </div>

    <el-row :gutter="20" class="course-grid">
      <el-col
        v-for="course in courses"
        :key="course.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <el-card class="course-card">
          <img :src="course.coverImage" class="course-image" />
          <h3>{{ course.title }}</h3>
          <p>{{ course.description }}</p>
          <div class="course-info">
            <span>{{ course.instructorName }}</span>
            <span>¥{{ course.price }}</span>
          </div>
          <el-button
            type="primary"
            @click="handleEnroll(course)"
          >
            立即报名
          </el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      v-model="enrollDialog"
      title="课程报名"
      width="400px"
    >
      <div class="enroll-info">
        <p>课程名称：{{ selectedCourse?.title }}</p>
        <p>价格：¥{{ selectedCourse?.price }}</p>
      </div>
      <template #footer>
        <el-button @click="enrollDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmEnroll">
          确认支付
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getCourses, enrollCourse } from '@/api/courses'
import { createOrder } from '@/api/payment'
import { ElMessage } from 'element-plus'

const router = useRouter()
const searchQuery = ref('')
const selectedCategory = ref('')
const courses = ref([])
const enrollDialog = ref(false)
const selectedCourse = ref(null)

const handleSearch = async () => {
  try {
    const { data } = await getCourses({
      keyword: searchQuery.value,
      categoryId: selectedCategory.value
    })
    courses.value = data
  } catch (error) {
    ElMessage.error('获取课程列表失败')
  }
}

const handleEnroll = (course) => {
  selectedCourse.value = course
  enrollDialog.value = true
}

const confirmEnroll = async () => {
  try {
    const order = await createOrder({
      courseId: selectedCourse.value.id,
      amount: selectedCourse.value.price
    })
    
    // 跳转到支付页面
    router.push({
      name: 'Payment',
      params: { orderId: order.id }
    })
  } catch (error) {
    ElMessage.error('创建订单失败')
  }
}

onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
.course-selection {
  padding: 20px;
}

.filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.course-grid {
  margin-top: 20px;
}

.course-card {
  margin-bottom: 20px;
}

.course-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-info {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
</style>